<template>
   <div>
     <van-nav-bar
        title="电影详情"
        class="navBar"
        @click-left="onClickLeft"
        left-arrow/>
        <van-loading v-if="!detailMovie.nm" type="spinner"/>
  <div class='movie-header'>
    <div class='movie-background' :style="{'background-image':`url(${detailMovie.img})`}"></div>
    <div class='movie-mask'></div>
    <div class='movie-content'>
      <div class='movie-poster':style="{'background-image':`url(${detailMovie.img})`}"></div>
      <div class='movie-info'>
        <div class='movie-name line-ellipsis'>{{detailMovie.nm}}</div>
        <div class='movie-ename line-ellipsis'>{{detailMovie.enm}}</div>
        <div v-if="detailMovie.globalReleased">
          <div v-if="detailMovie.sc">
            <div class='movie-score line-ellipsis'>
              <!-- <image class='movie-star' wx='{{detailMovie.stars}}' :key='' src='/assets/images/{{item}}.png'></image> -->
              {{detailMovie.sc}}
            </div>
            <div class='score-num line-ellipsis'>({{detailMovie.snum}}人评分)</div>
          </div>
        </div>
        <div v-else class='movie-score'>{{detailMovie.wish}}人想看</div>
        <div class='movie-category line-ellipsis'>
          <div>{{detailMovie.cat}}</div> 
          <div class='tag-box' v-if="detailMovie.version">
            <span class='tag-d'>{{detailMovie.version[0]}}</span>
            <span v-if="detailMovie.version[1]" class='tag-imax'>{{detailMovie.version[1]}}</span>
          </div>
         </div>
        <div class='movie-time line-ellipsis'>{{detailMovie.src}}/{{detailMovie.dur}}分钟</div>
        <div class='movie-time line-ellipsis'>{{detailMovie.pubDesc}}</div>
      </div>
    </div>
  </div>
  <div class='movie-body'>
    <div class='section'>
      <div class="section-title">剧情简介</div>
       <!-- :style={height:{isFold ? "60px":"auto"}} -->
      <div class="synopsis">{{detailMovie.dra}}</div> 
      <div class='iconfont icon-jiantouarrow483 ' :class="{unfold:!isFold}" bindtap='toggleFold'></div>
    </div>
    <div class='section'>
      <div class='section-title'>演职人员</div>
      <span style="margin-left:15px">暂无数据</span>
    </div>
    <div class='section'>
      <div class='section-title'>媒体库</div>
        <div v-if="!detailMovie.videoImg && !detailMovie.photos">暂无数据...</div>
        <div v-else class='videoImg-box'  bindtap='toVideo'>
          <image :src="detailMovie.videoImg" class='videoImg' mode='aspectFill'></image>
          <div class='iconfont icon-zanting'></div>
        </div>
         <div class="swiper-container img-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in detailMovie.photos" :key="index">
                     <img :src="item|imgFilter" class='photo'></img>
                </div>
            </div>
        </div>
       
    </div>
  </div>
  
</div> 
</template>

<script>
  import Swiper from "swiper";
  import "swiper/css/swiper.min.css";
  export default {
    name:'MovieDetail',
    data(){
        return {
            detailMovie:{},
            isFold:false,
        }
    },
    async beforeMount() {
        const movieId = this.$route.query.movieId
        console.log(movieId);
        const result =await this.$API.reqMovieDetail(movieId)
        console.log(result);

        const detailMovie=result.detailMovie;
        detailMovie.img=detailMovie.img.replace(/w.h/, 85.115)
        this.detailMovie=detailMovie;
        // detailMovie.img.replace(/w.h/, 85.115)
    },
    watch: {
    "detailMovie.photos"() {
      this.$nextTick(() => {
        new Swiper(".img-container ", {
          directions: "horizontal",
          slidesPerView: 3,
          spaceBetween: -60,
          freeMode: true,
        });
      });
    },
  },
  methods: {
    onClickLeft(){
      this.$router.go(-1)
    }
  },
  }
</script>

<style scoped>
  
  .movie-header {
  position: relative;
  height: 185px;
  box-sizing: border-box;
  padding: 15px;
  filter: blur(0);
  overflow: hidden;
}

.movie-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(15px);
  z-index: -1;
}

.movie-mask {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #40454e;
  opacity: 0.55;
}

.movie-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
}

.movie-poster {
  width: 110px;
  height: 150px;
  background-size: cover;
  background-repeat: no-repeat;
  border: solid 1px #f0f2f3;
}

.movie-info {
  height: 150px;
  width: 60%;
  margin-left: 15px;
  padding-top: 5px;
  font-size: 12px;
  color: #e5e5e5;
}

.movie-name {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.movie-ename {
  color: #fff;
  margin-bottom: 6px;
}

.movie-score {
  color: #ffc600;
  font-size: 18px;
}

.movie-star {
  width: 18px;
  height: 18px;
  margin-right: 3px;
}

.score-num {
  font-size: 12px;
}

.no-score {
  font-size: 16px;
}

.movie-category {
  display: flex;
  align-items: center;
  margin-top: 6px;
}

.tag-box {
  color: #fff;
  border: 0.02rem solid rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  box-sizing: border-box;
  font-size: 12px;
  margin-left: 2px;
}

.tag-d {
  padding: 0 2px;
  background-color: rgba(255, 255, 255, 0.4);
}

.tag-imax {
  padding: 0 2px;
}

.movie-body {
  margin-bottom: 55px;
}

.section {
  padding-bottom: 10px;
  border-bottom: 10px solid #f5f5f5;
  color: #555;
}

.section-title {
  padding: 10px 15px 5px;
  font-size: 32rpx;
  color: #444;
}

.synopsis {
  padding: 0 15px;
  line-height: 1.42;
  font-size: 15px;
  overflow: hidden;
}

.icon-jiantouarrow483 {
  height: 22px;
  color: #aaa;
  text-align: center;
  font-size: 16px;
  line-height: 22px;
}

.unfold {
  transform: rotate(180deg);
}

.scroll-view_H {
  padding: 0 15px;
  font-size: 15px;
  box-sizing: border-box;
}

.videoImg-box {
  position: relative;
  display: inline-block;
}

.icon-zanting {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 20px;
  opacity: 0.7;
  color: #fff;
}

.videoImg {
  width: 115px;
  height: 90px;
  margin-right: 5px;
}

.photo {
  width: 120px;
  height: 90px;
  margin-left: 5px;
}

.purchase {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #e54847;
  color: #fff;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
}

.comment {
  padding: 10px 15px;
  border-bottom: 1px solid #e6e6e6;
}
.total{
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  color: #f63;
  text-align: center;
  border-top: 1px solid #e6e6e6;
}

</style>